<template>
  <div>
    <!-- 个人中心头部 -->
    <div class="Me-shortcut">
      <div class="Me-left-box">
        <a href="./OraLogin.vue"><i class="el-icon-s-home"></i>shop首页</a>
      </div>
      <ul class="Me-rightbox">
        <li
          @mouseenter="showHideMine"
          @mouseleave="showHideMine"
          class="Me-mine"
        >
          <div class="Me-a">{{ name }}</div>
          <i class="el-icon-s-custom"></i><i class="el-icon-arrow-down"></i>
          <div v-show="flagMine" class="Me-mine-layer">
            <img src="../../public/Me-headimg.png" alt="" />
            <div>{{ name }}</div>
            <div @click="handleLogout" class="Me-a">退出</div>
          </div>
        </li>
        <li>|</li>
        <li @click="handleOrderClick" class="order">
          <div class="Me-a">我的订单</div>
        </li>
        <li class="">|</li>
        <li @mouseenter="showHideShop" @mouseleave="showHideShop">
          <div class="Me-a">我的Orangeshop</div>
          <i class="el-icon-arrow-down"></i>
          <div v-show="flagShop" class="Me-shop-layer">
            <div class="Me-a"><i class="el-icon-time"></i>我的足迹</div>
            <div
              class="Me-a"
              @click="$router.push('/mine/mineBag').catch((err) => {})"
            >
              <i class="el-icon-s-cooperation"></i>我的卡卷包
            </div>
          </div>
        </li>
        <li>|</li>
        <li @click="handleCartClick" class="Me-cart">
          <div class="Me-a">购物车</div>
        </li>
        <li>|</li>
        <li>
          <a href="./OraShop.vue"><div class="Me-a">购物商城</div></a>
        </li>
        <li>|</li>
        <li
          @click="handleHelpClick"
          @mouseenter="showHideHelp"
          @mouseleave="showHideHelp"
          class="Me-help"
        >
          <div class="Me-a">帮助中心</div>
          <i class="el-icon-arrow-down"></i>
          <div v-show="flagHelp" class="Me-help-layer">
            <div><i class="el-icon-question"></i>常见问题</div>
            <div><i class="el-icon-phone"></i>联系客服</div>
            <div><i class="el-icon-setting"></i>意见反馈</div>
          </div>
        </li>
      </ul>
    </div>
    <!-- logo和搜索框 -->
    <div class="Me-logoSearch">
      <div class="Me-logo">
        <img src="../../public/OrangeShopMInelogo.png" alt="" />
      </div>

      <div class="Me-search-box">
        <input type="text" placeholder="搜索商品" />
        <button>搜索</button>
      </div>
    </div>
  </div>
</template>

<script  scoped>
export default {
  data() {
    // 优先 localStorage，没有再查 sessionStorage
    let userInfo =
      localStorage.getItem("userInfo") || sessionStorage.getItem("userInfo");
    userInfo = userInfo ? JSON.parse(userInfo) : {};
    return {
      name: userInfo.username || "",
      flagMine: false,
      flagShop: false,
      flagHelp: false,
    };
  },
  methods: {
    handleOrderClick() {
      // 处理我的订单点击事件
      this.$router.push("/order");
      // 刷新页面
      this.$router.go(0);
    },
    handleCartClick() {
      // 处理购物车点击事件
      this.$router.push("/cart");
      // 刷新页面
      this.$router.go(0);
    },
    handleHelpClick() {
      // 处理帮助中心点击事件
      this.$router.push("/help");
      // 刷新页面
      this.$router.go(0);
    },
    showHideMine() {
      // 切换显示/隐藏个人信息层
      this.flagMine = !this.flagMine;
    },
    showHideShop() {
      // 切换显示/隐藏商店信息层
      this.flagShop = !this.flagShop;
    },
    showHideHelp() {
      // 切换显示/隐藏帮助中心层
      this.flagHelp = !this.flagHelp;
    },
    handleLogout() {
      // 处理退出登录逻辑
      localStorage.removeItem("userInfo");
      this.$router.push("/");
      // 刷新页面
      this.$router.go(0);
    },
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.Me-shortcut {
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: #dfe0df;
  border-bottom: 1px solid #402e32;
}
.Me-shortcut .Me-left-box {
  height: 30px;
  line-height: 30px;
  float: left;
}
a {
  /* 去除默认a的默认样式，下划线，虚线框和颜色 */
  text-decoration: none;
  outline: none;
  color: #000;
}
a:hover {
  color: #ffa500;
  cursor: pointer;
}
.Me-shortcut .Me-rightbox {
  float: right;
}
.Me-shortcut .Me-rightbox li {
  position: relative;
  float: left;
  list-style: none;
  margin-right: 10px;
}
.Me-shortcut .Me-rightbox li .Me-a {
  float: left;
}
.Me-shortcut .Me-rightbox li .Me-a:hover {
  cursor: pointer;
  color: #ffa500;
}

.Me-shortcut .Me-rightbox li .Me-mine-layer {
  z-index: 1000;
  background-color: #dfe0df;
  position: absolute;
  width: 160px;
  top: 30px;
  border: 1px solid #402e32;
  border-top: none;
}
.Me-shortcut .Me-rightbox li .Me-mine-layer img {
  float: left;
  width: 60px;
}
.Me-shortcut .Me-rightbox li .Me-mine-layer div {
  float: left;
  margin-left: 5px;
  line-height: 51.27px;
}
.Me-shortcut .Me-rightbox li .Me-shop-layer {
  z-index: 1000;
  position: absolute;
  background: #dfe0df;
  width: 126px;
  top: 30px;
  border: 1px solid #402e32;
  border-top: none;
}
.Me-shortcut .Me-rightbox li .Me-shop-layer i {
  margin-right: 2px;
}
.Me-shortcut .Me-rightbox li .Me-help-layer {
  z-index: 1000;
  position: absolute;
  background: #dfe0df;
  right: -10px;
  width: 100px;
  top: 30px;
  border: 1px solid #402e32;
  border-top: none;
}
.Me-logoSearch {
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: #dfe0df;
}
.Me-logoSearch .Me-logo {
  background: #f9ebd2;
  width: 180px;
  align-items: center;
  cursor: pointer;
  display: flex;
  color: #ffa500;
  font-size: 30px;
  line-height: 25px;
  font-weight: 500;
  margin-left: 20px;
}
.Me-logoSearch .Me-logo img {
  width: 100%;
  height: 80px;
}
.Me-logoSearch .Me-search-box {
  background: #fff;
  border: 2px solid #ffa500;
  box-sizing: border-box;
  max-width: 330px;
  height: 44px;
  border-radius: 12px;
  margin-right: 20px;
  line-height: 44px;
  margin-top: 10px;
}
.Me-logoSearch .Me-search-box input {
  float: left;
  margin-left: 10px;
  outline: none;
  height: 100%;
  border: none;
  width: 250px;
}
.Me-logoSearch .Me-search-box button {
  float: left;
  cursor: pointer;
  width: 66px;
  height: 100%;
  border-radius: 9px;
  border: none;
  background: #ffa500;
}
</style>